<template>
  <div class="edit-account-keeper-page">
    <a-spin :spinning="loading">
      <a-form :model="formState" ref="formDataRef" name="basic" :label-col="{ style: 'width:145px' }" :wrapper-col="{ style: 'calc(100% - 145px)' }" autocomplete="off">
        <div class="question-info">
          <a-row>
            <a-col :span="12">
              <a-form-item label="开户行名称" name="bankName" :rules="[{ required: true, message: '请输入开户行名称', trigger: 'change' }]">
                <a-input v-model:value="formState.bankName" />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="联行号" name="sisterBankNum">
                <a-input v-model:value="formState.sisterBankNum" />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="是否同步账单" name="isSyncBill" :rules="[{ required: true, message: '请选择是否同步账单', trigger: 'change' }]">
                <a-radio-group v-model:value="formState.isSyncBill">
                  <a-radio :value="1">是</a-radio>
                  <a-radio :value="0">否</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="备注" name="remark">
                <a-input v-model:value="formState.remark" />
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </a-spin>

    <div class="operation-wrapper">
      <a-button :loading="loading" type="primary" @click="onSubmit" v-debounce>提 交</a-button>
      <a-button @click="resetForm">关 闭</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";

const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: AccountKeeper.ListRows;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "submit"): void;
  (e: "update:visible", visible: boolean): void;
}>();

const { visible, passData } = toRefs(props);

const { loading, formState, formDataRef } = InitHook();

const { onSubmit, resetForm } = OperationHook({ loading, formState, emit, formDataRef, passData });

const init = () => {
  const { bankName, sisterBankNum, isSyncBill, remark } = passData.value;

  formState.bankName = bankName;
  formState.sisterBankNum = sisterBankNum;
  formState.isSyncBill = isSyncBill;
  formState.remark = remark;
};

watch(
  () => visible.value,
  v => {
    if (!v) {
      resetForm();
    } else {
      init();
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
.edit-account-keeper-page {
    padding-bottom: 50px;
    .title{
        font-weight: 600;
        font-size: 14px;
        padding: 12px;
    }
    .question-info{
       padding:30px 6px;
       margin-bottom:12px
       background-color: #fff;
       border-radius: 8px;
       box-shadow: 0px 0px 4px 0px #ccc;
       font-weight: 600;
       padding:12px;

         :deep(.ant-form-item){
          margin-bottom: 8px;
         }
    }
    .operation-wrapper{
        position: absolute;
        background-color: #fff;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 12px 0;
        text-align: center;
        box-shadow: 1px 1px 5px #ccc;
        z-index: 99;
        :deep(.ant-btn-primary){
          margin-right: 12px;
        }
      }
}
</style>
